<template>
  <div>

    <!-- 轮播图区域 -->
    <mt-swipe :auto="6000">
       <!--在组件中，使用v-for循环的话，一定要使用 key -->
      <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
        <a :href="item.href">
          <img :src="item.url" class="img"/>
          <span class="desc"></span>
        </a>
      </mt-swipe-item> 
    </mt-swipe>



    <!-- 九宫格 到 6宫格 的改造工程 -->
    <div class="mui-slider-group">
				<div class="mui-slider-item">
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li
							class="mui-table-view-cell mui-media mui-col-xs-4">
							<router-link to="/member">
                <span class="mui-icon mui-icon-person"></span>
								<div class="mui-media-body">个人中心</div>
						  </router-link>
						</li>
						<li
							class="mui-table-view-cell mui-media mui-col-xs-4">
							<router-link to="/search">
                <span class="mui-icon mui-icon-search"></span>
								<div class="mui-media-body">搜索</div>
						  </router-link>
						</li>
						<li
							class="mui-table-view-cell mui-media mui-col-xs-4">
							<router-link to="/order">
                <span class="mui-icon mui-icon-extra mui-icon-extra-order">
                  <span class="mui-badge">0</span>
                </span>
								<div class="mui-media-body">订单</div>
						  </router-link>
						</li>
						<li
							class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#"> <span class="mui-icon mui-icon-info"></span>
								<div class="mui-media-body">关于</div>
						  </a>
						</li>
            <li
							class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#"> <span class="mui-icon mui-icon-info"></span>
								<div class="mui-media-body">关于</div>
						  </a>
						</li>
            <li
							class="mui-table-view-cell mui-media mui-col-xs-4">
							<a href="#"> <span class="mui-icon mui-icon-info"></span>
								<div class="mui-media-body">关于</div>
						  </a>
						</li>
					</ul>
				</div>
      </div>
    

  </div>
</template>

<script>
import { Toast } from "mint-ui";
//import items from "../item.js";test data

export default {
  data() {
    return {
      lunbotuList: [   
        {
            title: '1',
            href: '#',
            url: 'http://localhost:3000/src/images/img1.jpg'
        }, 
        {
            title: '2',
            href: '#',
            url: 'http://localhost:3000/src/images/img2.jpg'
        },
        {
            title: '3',
            href: '#',
            url: 'http://localhost:3000/src/images/img3.jpg'
        }
    ]
       // 保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      console.log('1')
      // 获取轮播图数据的方法
      /* this.$http.get("http://vue.studyit.io/api/getlunbo").then(result => {
        // console.log(result.body);
        if (result.body.status === 0) {
          // 成功了
          this.lunbotuList = result.body.message;
        } else {
          // 失败的
          Toast("加载轮播图失败。。。");
        }
      }); */
    }
  }
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 600px) {
  .mint-swipe {
    position: relative;
    height: 250px;

    .mint-swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
@media screen and (min-width: 600px) {
.mint-swipe {
    position: relative;
    height: 500px;

    .mint-swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.mui-grid-view.mui-grid-9 {
  background-color: #fff;
  border: none;
  img {
    width: 60px;
    height: 60px;
  }

  .mui-media-body{
    font-size: .8em;
    
    
  }
  .mui-icon-extra-order {
      font-size: 2em;
    }
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
  border: 0;
}



</style>
